<template>
  <el-dialog v-model="visible" title="加工单详情" width="1400" show-footer show-zoom resize @close="close">
    <div class="py-2 px-2" style="background-color: #EAF3FF;">
      <div class="flex">
        <div class="item">采购单号：<span>{{ datum.receive_order?.receipt_number }}</span></div>
        <div class="item">平台下单号：<span>{{ datum.receive_order?.platform_order_no }}</span></div>
        <div class="item">快递单号：<span>{{ datum.receive_order?.express_json &&
          datum.receive_order?.express_json.join(',') }}</span>
        </div>
      </div>
      <div class="flex">
        <div class="item">采购员：<span>{{ datum.receive_order?.purchase_user }}</span></div>
        <div class="item">仓库：<span>{{ datum.receive_order?.warehouse_name }}</span></div>
        <div class="item">国家：<span style="color:#E50113 ;">{{ datum.receive_order?.country }}</span></div>
      </div>
      <div class="">
        <div class="item">下单备注：{{ datum.receive_order?.order_remark }}</div>
      </div>
    </div>
    <div>
      <div class="py-2">
        <el-button type="primary" @click="handleQC">送质检</el-button>
      </div>
      <el-table :data="datum.details" border height="500" style="width: 100%" highlight-current-row :header-cell-style="{
        color: '#333333',
        background: '#F6FAFF'
      }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="60" label="序号" />
        <el-table-column prop="sku" label="SKU/自定义SKU" width="180">
          <template #default="{ row }">
            <div>SKU：{{ row.sku }}</div>
            <div>自定义SKU：{{ row.custom_sku }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sku_en_title" label="产品名称" width="220">
          <template #default="{ row }">
            <el-tooltip class="item" effect="dark" :content="row.sku_cn_title" placement="top">
              <div class="overflow-line2 text-[#333333]">{{ row.sku_cn_title }}</div>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="row.sku_en_title" placement="top">
              <div class="overflow-line2 text-[#333333]">{{ row.sku_en_title }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="sku_en_title" label="基础信息" width="220">
          <template #default="{ row }">
            <div>重量：{{ row.weight }}</div>
            <div>长宽高：{{ row.length }} * {{ row.width }} * {{ row.height }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="batch_code" label="产品图片" width="100">
          <template #default="{ row }">
            <template v-for="(item, index) in row.image">
              <div v-if="index == 0">
                <VImage :src="item" width="60" height="60" :previewlist="row.image"></VImage>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="qc_status_cn" label="是否质检" width="90" />
        <el-table-column prop="num" label="收货数量" width="90" />
        <el-table-column prop="num" label="加工类型" width="110">
          <template #default="{ row }">
            <el-select class="selectClass" v-model="row.process_type" placeholder="状态" clearable>
              <el-option v-for="item in props.options['stockin.processOrder']?.[0].processType" :key="item.value"
                :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="wait_check_num" label="打印" width="114">
          <template #default="{ row }">
            <el-button type="primary" @click="handlePrint(row.id)">标签打印</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180" >
          <template #default="{ row }">
            <el-input v-model="row.remark" type="textarea" placeholder="备注"></el-input>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <LlabelPrinting ref="LlabelPrintingRef"></LlabelPrinting>
</template>
<script setup name="ComModal">
import { getOrder, createQcOrder } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import VImage from '@/components/Image/index.vue'
import LlabelPrinting from '@/components/LlabelPrinting'
const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query','focus'])

const props = defineProps({
  options: {
    type: Array,
    default: [],
  },
})

const data = reactive({
  datum: {
    receive_order: null
  },
  process_order_id: '',
  multipleSelection: []
})
const { datum, multipleSelection, process_order_id } = toRefs(data)

const open = (id) => {
  process_order_id.value = id
  getDetail()
  visible.value = true
}

const getDetail = async () => {
  try {
    const res = await getOrder({
      process_order_id: process_order_id.value
    })
    datum.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 打印
const LlabelPrintingRef = ref()
const handlePrint = async (id) => {
  LlabelPrintingRef.value.open()
}

// 送质检
const handleQC = async () => {
  if (!isHandle()) return
  const details = multipleSelection.value.map(i => {
    return {
      id: i.id,
      process_type: i.process_type
    }
  })
  try {
    const res = await createQcOrder({
      process_order_id: process_order_id.value,
      details
    })
    ElMessage.success(res.message)
    getDetail()
  } catch (e) {
    throw Error(e)
  }
}

const isHandle = () => {
  return !multipleSelection.value.length ? ElMessage.error('请先选择行!') && false : true
}

const close = () => {
  visible.value = false
  emits('focus')
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}

.item {
  width: 300px;
  color: #999999;
  font-size: 16px;
  padding: 8px 0;

  span {
    color: #333333;
  }
}
</style>
